<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>穿梭框组件</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">


</head>
<body>
<div id="a穿梭框"></div>
<br/><br/>
<button onclick="a获得右侧数据()" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">获得右侧数据</button>
<script src="../zujian/layui/layui.all.js"></script>
<script>

    let transfer =null;
    layui.use('transfer', function(){
         transfer = layui.transfer;
        //渲染
        transfer.render({
            elem: '#a穿梭框'  //绑定元素
            ,id: 'demo1' //定义索引
            // 穿梭框上方标题
            ,title:['标题一', '标题二']
            // 初始选中的数据（右侧列表）
            ,value:'2'
            // 是否开启搜索
            ,showSearch:true

            ,width:200

            ,height:340
            //自定义文本，如空数据时的异常提示等。
            ,text: {
                none: '无数据' //没有数据时的文案
                ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
            }

            //这个是合法数据不需要 parseData回调进行解析
            // ,data: [
            //     {
            //         "value": "1"
            //         , "title": "李白"
            //         //是否不能使用
            //         , "disabled": true
            //         //是否已选择
            //         , "checked": true
            //     }
            //     ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
            //     ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
            // ]

            //这个是非合法数据,需要 parseData 进行解析
            ,data: [
                {"id": "1", "name": "李白"}
                ,{"id": "2", "name": "杜甫"}
                ,{"id": "3", "name": "贤心"}
            ]

            // 数据格式解析的回调函数，
            // 用于将任意数据格式解析成
            // transfer 组件规定的数据格式
            ,parseData:function (res) {
                //res 应该的字段名字
                return {
                    //解析data中字段对应的应该字段
                    "value": res.id //数据值
                    ,"title": res.name //数据标题
                    ,"disabled": res.disabled  //是否禁用
                    ,"checked": res.checked //是否选中
                }
            }
            ,onchange:function (data,index) {
                // data 比如 [{"value":"1","title":"李白"},{"value":"3","title":"贤心"}]
                alert(JSON.stringify(data)); //得到当前被穿梭的数据
                //如果数据<来自>左边，index 为 0，否则为 1
                alert(index);
            }
        });

        // let options={}
        //基础用法是组件关键组成部分，目前所开放的所有方法如下：
        // transfer.set(options); //设定全局默认参数。options 即各项基础参数
        // transfer.reload(id, options); //重载实例


        //可以重载所有基础参数
        // transfer.reload('demo1', {
        //     title: ['新列表1', '新列表2']
        // });

    });
    function a获得右侧数据() {
        let xxx=transfer.getData('demo1'); //获得右侧数据
        // [{"value":"2","title":"杜甫"},{"value":"1","title":"李白"},{"value":"3","title":"贤心"}]
        alert(JSON.stringify(xxx))
    }

</script>
</body>
</html>